<template>
  <van-nav-bar title="基本资料" left-arrow fixed @click-left="onBack" />

  <div class="clear"></div>
  <div class="h50"></div>
  <div class="clear"></div>
  <div class="user">
    <div class="user-image">
      <img :src="LoginAuth.avatar_cdn" alt="" />
    </div>
  </div>

  <div class="form">
    <van-form @submit="onProfile">
      <van-field
        v-model="LoginAuth.mobile"
        readonly
        name="mobile"
        label="手机号"
        placeholder="手机号"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写手机号' }]"
      />

      <van-field
        v-model="LoginAuth.nickname"
        name="nickname"
        label="昵称"
        placeholder="昵称"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写昵称' }]"
      />

      <van-field
        v-model="LoginAuth.email"
        name="email"
        label="邮箱"
        placeholder="邮箱"
        label-align="right"
        label-width="4.5em"
        colon
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />

      <van-field
        type="password"
        v-model="LoginAuth.password"
        name="password"
        label="密码"
        placeholder="密码为空就不修改密码"
        label-align="right"
        label-width="4.5em"
        colon
      />

      <van-field
        name="gender"
        label="性别"
        label-align="right"
        label-width="4.5em"
        colon
      >
        <template #input>
          <van-radio-group v-model="LoginAuth.gender" direction="horizontal">
            <van-radio name="0">保密</van-radio>
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-model="LoginAuth.region_text"
        is-link
        readonly
        name="region"
        label="地区选择"
        placeholder="点击选择城市"
        @click="showArea = true"
        label-align="right"
        label-width="4.5em"
        colon
      />

      <!-- 头像 -->
      <van-field
        name="avatar"
        label="头像上传"
        label-align="right"
        label-width="4.5em"
        colon
      >
        <template #input>
          <van-uploader v-model="avatar" :max-count="1" />
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <!-- 地区弹出层 -->
    <van-popup v-model:show="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
        v-model="LoginAuth.district"
      />
    </van-popup>
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { showNotify } from "vant";
export default {
  data() {
    return {
      LoginAuth: {},
      avatar: [],
      showArea: false,
      areaList,
    };
  },
  created() {
    this.LoginAuth = this.$cookies.get("LoginAuth")
      ? this.$cookies.get("LoginAuth")
      : {};

    if (this.LoginAuth.avatar) {
      this.avatar = [
        {
          url: this.LoginAuth.avatar_cdn,
        },
      ];
    }
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    async onProfile(values) {
      let data = {
        id: this.LoginAuth.id,
        nickname: values.nickname,
        email: values.email,
        gender: values.gender,
        province: this.LoginAuth.province,
        city: this.LoginAuth.city,
        district: this.LoginAuth.district,
      };

      if (values.password) {
        data.password = values.password;
      }

      let avatar = values.avatar[0].file ? values.avatar[0].file : "";

      if (avatar) {
        data.avatar = avatar;
      }

      let result = await this.$api.profile(data);

      if (result.code === 1) {
        showNotify({
          type: "success",
          duration: 1500,
          message: result.msg,
          onClose: () => {
            this.$router.push("/business/base/index");
          },
        });
      } else {
        showNotify({
          type: "warning",
          duration: 1500,
          message: result.msg,
        });
      }
    },
    onConfirm(values) {
      this.showArea = false;

      // 获取选中地区
      let [province, city, district] = values.selectedOptions;

      let region_text = "";

      if (province.value) {
        region_text = province.text + "-";
        this.LoginAuth.province = province.value;
      }

      if (city.value) {
        region_text += city.text + "-";
        this.LoginAuth.city = city.value;
      }

      if (district.value) {
        region_text += district.text;
        this.LoginAuth.district = district.value;
      }

      this.LoginAuth.region_text = region_text;
    },
  },
};
</script>

<style>
@import url("/assets/css/profile.css");
</style>